<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="ui,gui,prototyping,designer,builder,rad,ria,spa,no-code,codeless,without coding,programming,development,drag and drop,web application,build app,create app,make app" />
    <meta name="description" content="Powered by CrossUI No-Code App Builder - Create Interactive App Without Coding" />
    <meta name="copyright" content="copyright@crossui.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .cls1{
            border:dashed 2px #0000ff;
        }
        .cls2{
            font-size:14px; 
            border:solid 1px #444; 
            margin: 4px;
        }
    </style>
    <title>Powered by CrossUI No-Code App Builder - appearance example - use itemClass and itemStyle</title>
</head>
    <body>
        <script type="text/javascript" src="../../../runtime/xui/js/xui-all.js"></script>
        <script type="text/javascript">
            xui.main(function(){
var tgdata= {
     header: [
        {
            "id" : "col1",
            "caption" : "col1",
            "type" : "input",
            "width" : 50
        },
        {
            "id" : "col2",
            "caption" : "col2",
            "type" : "number",
            "format":"^-?\\d\\d*$",
            "headerStyle":"background-color:#eee;",
            "cellStyle":"background-color:#eee;",
            "renderer":function(i,oi){return '['+ i.caption+']'},
            "cellRenderer":function(i,oi){return 'RMB'+ i.value},
            "width" : 80
        },
        {
            "id" : "col3",
            "caption" : "col3",
            "type" : "checkbox",
            "width" : 40
        },
        {
            "id" : "col4",
            "caption" : "col4",
            "type" : "color",
            "width" : 60
        }
    ],
    rows: [
        {
            "id" : "row1",
            "cells" : ["cell11",1,true,'#FFFFFF']
        },
        {
            "id" : "row2",
            "rowStyle":"font-weight:bold;background-color:#eee;",
            "cells" : ["cell21",2,true,'#eeeAAA']
        },
        {
            "id" : "row3",
            "cells" : ["cell31",3,false,'#00FFFF']
        },
        {
            "id" : "row4",
            "cells" : ["cell41",4,false,'#FF00FF'],
            "sub" : [
                {
                    "id" : "row5",
                    "cells" : ["in51",5,false,'#0000FF']
                },
                {
                    "id" : "row6",
                    "cells" : ["in61",6,false,'#FF0000']
                },
                {
                    "id" : "row7",
                    "cells" : ["in71",7,false,'#F0000F']
                },
                {
                    "id" : "row8",
                    "cells" : ["in81",8,false,'#555555']
                }
            ]
        },
        {
            "id" : "row9",
            "cells" : ["cell91",9,false,'#FFFFFF'],
            "sub" : [
                {
                    "id" : "row10",
                    "cells" : ["in101",10,false,'#FFFFFF']
                },
                {
                    "id" : "row11",
                    "cells" : ["in111",11,false,'#FFFF00']
                },
                {
                    "id" : "row12",
                    "cells" : ["in121",12,false,'#FF00FF']
                },
                {
                    "id" : "row13",
                    "cells" : ["in131",13,false,'#00FFFF']
                }
            ]
        }
    ]
};
xui.Class('App', 'xui.Module',{
    Instance:{
        //Com events
        events:{}, 
        iniComponents:function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append((new xui.UI.List)
                .setHost(host,"list3")
                .setItems([{"id":"a", "caption":"itema", "itemClass":"cls1"}, {"id":"b", "caption":"itemb", "itemClass":"cls2"}])
                .setLeft(40)
                .setTop(40)
            );
            
            append((new xui.UI.List)
                .setHost(host,"list4")
                .setItems([{"id":"a", "caption":"16px", "itemStyle":"font-size:14px;"}, {"id":"b", "caption":"18px", "itemStyle":"font-size:18px;"}, {"id":"d", "caption":"20px", "itemStyle":"font-size:20px;"}, {"id":"e", "caption":"22px", "itemStyle":"font-size:22px;"}])
                .setLeft(200)
                .setTop(40)
            );
            
            append((new xui.UI.Pane)
                .setHost(host,"pane3")
                .setLeft(350)
                .setTop(40)
                .setWidth(280)
                .setHeight(150)
            );
            
            host.pane3.append((new xui.UI.TreeGrid)
                .setHost(host,"tg")
                .setDockMargin({"left":0, "top":0, "right":0, "bottom":0})
                .setHeader(tgdata.header)
                .setRows(tgdata.rows)
            );
            
            return children;
            // ]]Code created by CrossUI RAD Tools
        }
    }
});
(new App).show();
            });
        </script>

<!-- CrossUI Team License code: 201302-A347-DDA31C-61-->
<style>#xuibar a, #xuibar span{font-size:12px;margin-right:2px;padding:2px;}#xuibar a{text-decoration:underline;}#xuibar_more a{text-decoration:none;padding:3px;font-size:12px;text-decoration:none;display:block;}#xuibar a:hover, #xuibar_more a:hover{text-decoration:none;color:#fff!important;background:#598EDD;}#xuibar small{font-size:9px;}#xuibar_more{position:absolute;display:none;top:19px;z-index:6000;border:solid 1px;border-color:#E4F1FD #598EDD #598EDD #598EDD; background:#E4F1FD;}#xuibar_more{width:100px;}</style><script>var xuibar={byId:function(id){return document.getElementById(id).style},get1:function(){return this.byId('xuibar')},get2:function(id){return this.byId(id)},get3:function(){return this.byId('xuibar_l')},show:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}var s=n.get1();s.height='19px';s.backgroundColor='#E4F1FD';n.get3().display='block';},hide:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}n._t1=setTimeout(function(){var s=n.get1();s.height='3px';s.backgroundColor='#598EDD';n.get3().display='none';if(n.showed)n.get2(n.showed).display='none';},600);},showPop:function(ele){var n=this,id=ele.id.replace(/.*:/,'');if(n.showed&&id!=n.showed)n.get2(n.showed).display='none';if(n._t1){clearTimeout(n._t1);delete n._t1;}if(n._t2){clearTimeout(n._t2);delete n._t2;}n.showed=id;if(ele.id.indexOf('pop:')==0){var s=n.get2(id);s.left=(ele.offsetLeft-4)+'px';s.display='block';}},hidePop:function(){var n=this;if(n._t2){clearTimeout(n._t2);delete n._t2;}n._t2=setTimeout(function(){n.get2('xuibar_more').display='none';},100);n.hide();}};</script><div id='xuibar' onmouseout="xuibar.hide()"  onmouseover="xuibar.show()" style='position:absolute;width:100%;left:0;top:0;height:3px;z-index:5000;background:#598EDD;line-height:19px;overflow:hidden;'><nobr><a target=_blank href='https://www.crossui.com'><strong>CrossUI Home</strong></a><a target=_blank href='https://www.crossui.com/RADGithub'>RAD Tools</a><a target=_blank href='https://www.crossui.com/xui/Examples'>Examples</a><a target=_blank href='https://www.crossui.com/FormBuilder'>Form Builder</a><a target=_blank href='https://www.crossui.com/FCEditor'>FusionCharts Editor</a><a target=_blank href='https://www.crossui.com/JSONEditor'>JSONEditor</a><a target=_blank href='https://www.crossui.com/xui/API/index.html'>API</a><!--li><a href="./Forum" target=_blank>Forum</a></li--><a target=_blank href='https://www.crossui.com/order.html'><strong>Buy Now</strong></a></nobr></div><div id='xuibar_l' style="left:0;position:absolute;top:19px;display:none;border-top:1px solid #598EDD;font-size:0;line-height:0;width:100%;z-index:5500;"></div><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59755ed8d0255613"></script>
<script>setTimeout(function(){(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-39926100-1', 'crossui.com');ga('send', 'pageview');},100);</script>

</body>
</html>
